<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>QQ空间</title>
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css" type="text/css">
    <script src="plugins/jquery/jquery.min.js"></script>
    <script src="plugins/bootstrap/js/bootstrap.js"></script>
</head>
<style>
    * {
        box-sizing: border-box;
    }

    .logo {
        margin-left: 150px;
        margin-right: 20px;
    }

    /* 导航框颜色 */
    .navbar-inverse {
        background-color: #0e0e0e;
        border-color: #080808;
    }

    .dhk {

        height: 200px;
        width: 380px;
    }

    .record {
        margin: 10px;
        float: left;

    }

    .dhkleft {
        float: left;
        margin: 20px;
    }

    .dhkright {
        float: left;
        margin: 20px;
    }

    .dhkmiddle {
        width: 2px;
        height: 160px;
        background-color: #B3B3B3;
        margin-top: 30px;
        margin-bottom: 20px;
        float: left;
    }

    /* 播放器 */
    .player {
        width: 100px;
        height: 50px;
        float: left;
        margin-left: 100px;

    }

    .player a {
        display: block;
        height: 100%;
        text-decoration: none;
        color: #333;
    }

    .player:hover {
        background-color: white;
    }


    .container1 {
        float: left;
        margin: 15px 1px 15px 30px;
        background-color: #B3B3B3;

    }

    .container2 {
        float: left;
        margin: 15px 30px 15px 1px;
        background-color: #B3B3B3;
    }

    .touxiang a {
        text-decoration: none;
    }

    .touxiang:hover {
        background-color: #333;
    }

    .exit:hover {
        background-color: #333;
    }

    .setting:hover {
        background-color: #fff;
    }

    .huangzhuan:hover {
        background-color: #fff;
    }
    .head-nav{
        margin-top: 60px;
    }
    .head-nav-menu{
        list-style: none;
        
    }
    .head-nav-menu li{
        float: left;
        margin-right:30px;
    }
    .head-nav-menu a{
        color: rgb(102, 100, 100);
    }
</style>

<body>
    <div class="container-fluid">
        <div class="row">
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="logo" href="#" title="QQ空间"><img src="imgs/logo.png" height="40px" width="100px"></a>
                    </div>
                    <div class="collapse navbar-collapse" id="example-navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">个人中心</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    我的主页 <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <div class="dhk">
                                            <div class="dhkleft">
                                                <div class="record">
                                                    <img src="imgs/zy.png" alt=""><br>
                                                    <p style="text-align: center"><a href="#">主页</a></p>
                                                </div>
                                            </div>
                                            <div class="dhkmiddle">

                                            </div>
                                            <div class="dhkright">
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div><br>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    好友 <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <div class="dhk">
                                            <div class="dhkleft">
                                                <div class="record">
                                                    <img src="imgs/zy.png" alt=""><br>
                                                    <p style="text-align: center"><a href="#">主页</a></p>
                                                </div>
                                            </div>
                                            <div class="dhkmiddle">

                                            </div>
                                            <div class="dhkright">
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div><br>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    游戏 <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <div class="dhk">
                                            <div class="dhkleft">
                                                <div class="record">
                                                    <img src="imgs/zy.png" alt=""><br>
                                                    <p style="text-align: center"><a href="#">主页</a></p>
                                                </div>
                                            </div>
                                            <div class="dhkmiddle">

                                            </div>
                                            <div class="dhkright">
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div><br>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    装扮 <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <div class="dhk">
                                            <div class="dhkleft">
                                                <div class="record">
                                                    <img src="imgs/zy.png" alt=""><br>
                                                    <p style="text-align: center"><a href="#">主页</a></p>
                                                </div>
                                            </div>
                                            <div class="dhkmiddle">

                                            </div>
                                            <div class="dhkright">
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div><br>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                                <div class="record" style="text-align: center">
                                                    <img src="imgs/record.png" alt=""><br>
                                                    <p><a href="#">日志</a></p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </li>
                            <li>
                                <div class="player" style="vertical-align:middle" title="点击设置背景音乐">
                                    <a href="#">
                                        <div class="container1and2">
                                            <div class="container1">
                                                <span class="glyphicon glyphicon-play"></span>
                                            </div>
                                            <div class="container2">
                                                <span class="glyphicon glyphicon-signal"></span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="search" style=" width:200px; margin-top: 7px;">
                                    <form class="bs-example bs-example-form" role="form">

                                        <div class="col-md-12">
                                            <div class="input-group">
                                                <input type="text" class="form-control" placeholder="好友/游戏/动态">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button">
                                                        <span class="glyphicon glyphicon-search"></span>
                                                    </button>
                                                </span>
                                            </div><!-- /input-group -->
                                        </div><!-- /.col-lg-6 -->

                                    </form>
                                </div>
                            </li>
                            <li>
                                <div class="touxiang">
                                    <a href="#">
                                        <div style="padding-top: 5px; padding-bottom: 10px">
                                            <img src="imgs//tx.png" width="35px" height="35px">
                                            <span style="margin-left:10px;  color: white ">゛ 若 久</span>
                                        </div>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="exit" style="vertical-align:middle" title="退出">
                                    <a href="#">
                                        <div
                                            style="line-height: 50px; margin-left: 5px;margin-right: 5px; height: 50px;width: 15px;">
                                            <span class="glyphicon glyphicon-log-out" style="color: #B3B3B3"></span>
                                        </div>
                                    </a>
                                </div>

                            </li>
                            <li class="dropdown">
                                <div class="setting" style="vertical-align:middle">
                                    <a href="#">
                                        <div
                                            style="line-height: 50px; margin-left: 5px;margin-right: 5px; height: 50px;width: 15px;">
                                            <span class="glyphicon glyphicon-cog" style=" color: #B3B3B3"></span>
                                        </div>
                                    </a>
                                </div>
                                <ul class="dropdown-menu">
                                    <li><a href="#">修改资料</a></li>
                                    <li><a href="#">主页排版</a></li>
                                    <li><a href="#">空间设置</a></li>
                                    <li><a href="#">权限设置</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">帮助中心</a></li>
                                    <li><a href="#">意见反馈</a></li>
                                    <li><a href="#">安全防护</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <div class="huangzhuan" style="vertical-align:middle">
                                    <a href="#">
                                        <div
                                            style="line-height: 50px; margin-left: 5px;margin-right: 5px; height: 50px;width: 15px;">
                                            <img src="imgs//hz.png" height="20px" width="20px">
                                        </div>
                                    </a>
                                </div>
                                <ul class="dropdown-menu">
                                    <li><a href="#">开通黄钻</a></li>
                                    <li><a href="#">开年费黄钻</a></li>
                                    <li><a href="#">向好友索取</a></li>
                                    <li><a href="#">赠送给好友</a></li>
                                    <li><a href="#">黄钻官网</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <div class="container-fluid" >
        <div class="row">
            <div class="layout-head-inner" style="background: url(imgs//bgp.jpg) no-repeat;height: 1000px; margin-top: -40px; padding:50px; display: block;">
                <div class="head-info" style="margin-left: 100px"> 
                    <h1 class="head-title"><span style="margin-left:20px;font-size: 35px; color: white; text-shadow:2px 2px 5px #333">゛ 若 久</span></h1>
                    <div class="head-description" style="margin-left: 30px; ">
                        <span class="description-text" style="color: white;text-shadow:2px 2px 2px #333">好好学习 天天向上</span>
                    </div>
                </div>
                <div class="head-detail" style="margin:50px 10px 50px 130px;float: left; " >
                    <img src="imgs//dtx.png" alt="修改头像" style="float: left">

                    <div class="head-detail-name" style="float: left">
                        <div>
                            <span class="user-name textoverflow" style="margin-left:20px;font-size: 20px; color: white; text-shadow:2px 2px 6px #333">゛ 若 久</span>
                        </div>
                        <div class="head-nav">
                                <ul class="head-nav-menu">
                                    <li class="menu_item_N1"><span class="arr"></span><a href="javascript:;" title="主页"
                                            tabindex="1" accesskey="z">主页</a></li>
                                    <li class="menu_item_2"><span class="arr"></span><a href="javascript:;" title="日志"
                                            tabindex="1" accesskey="r">日志</a></li>
                                    <li class="menu_item_4"><span class="arr"></span><a href="javascript:;" title="相册"
                                            tabindex="1" accesskey="4">相册</a></li>
                                    <li class="menu_item_334"><span class="arr"></span><a href="javascript:;" title="留言板"
                                            tabindex="1">留言板</a></li>
                                    <li class="menu_item_311"><span class="arr"></span><a href="javascript:;" title="说说"
                                            tabindex="1" accesskey="6">说说</a></li>
                                    <li class="menu_item_1"><span class="arr"></span><a href="javascript:;" title="个人档"
                                            tabindex="1" accesskey="1">个人档</a></li>
                                    <li class="menu_item_305"><span class="arr"></span><a href="javascript:;" title="音乐"
                                            tabindex="1">音乐</a></li>
                                    <li class="menu_item_more"><span class="arr"></span><a href="javascript:;" title="更多"
                                            tabindex="1">更多</a></li>
                                </ul>
                            </div>
                    </div>
                    <div class="other-info" style="float: left; margin-left: 200px ">
                            <div class="today-wrapper">
                                <p class="visit-today">今日访客<span class="count count-margin ">0</span></p>
                                <p class="visit-refuse">被挡访客<span class="count ">281</span></p>
                            </div>
                            <div class="count-wrapper">
                                <p class="visit-count">访客总量<span class="count ">3494</span></p>
                            </div> <i class="sn-count" style="display: none;"></i>
                        </div> <i class="icon-visit icon-star-0" title=""></i>
                </div>
            </div>
        </div>
    </div>

    </div>
    <script>
        $(document).ready(function () {
            dropdownOpen();//调用
        });
        /**
            * 鼠标划过就展开子菜单，免得需要点击才能展开
            */
        function dropdownOpen() {

            var $dropdownLi = $('li.dropdown');

            $dropdownLi.mouseover(function () {
                $(this).addClass('open');
            }).mouseout(function () {
                $(this).removeClass('open');
            });
        }
    </script>




</body>

</html>